<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-09 17:06:41
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-10-10 10:49:32
 * @FilePath: /web/src/components/lineChart/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="lineChart" :style="style"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "LineChart",
  props: {
    // 接收父组件传递的数据
    lineChart: {
      type: Object,
      required: true,
    },
    height: {
      type: String,
      default: "250px",
    },
  },
  watch: {
    lineChart: {
      deep: true,
      handler(val) {
        console.log(val);
        this.initLineChart(val);
      },
    },
  },
  mounted() {
    this.initLineChart();
  },
  computed: {
    style: function () {
      return "width:100%; height:" + this.height + ";";
    },
  },
  methods: {
    initLineChart() {
      let series = [];
      this.lineChart.values.forEach((e, index) => {
        let data = {
          data: e,
          type: "line",
        };
        if (this.lineChart.name && this.lineChart.name[index]) {
          data.name = this.lineChart.name[index];
        }
        series.push(data);
      });
      const chartDom = this.$refs.lineChart;
      const myChart = echarts.init(chartDom);
      const option = {
        color: ["#FEC718", "#01F7FD", "#70B603", "#027DB4"],
        tooltip: {
          trigger: "axis",
        },
        title: {
          text: this.lineChart.title,
        },
        xAxis: {
          type: "category",
          data: this.lineChart.categories,
          axisLine: {
            lineStyle: {
              color: "#01F7FD",
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: series,
      };

      myChart.setOption(option);
    },
  },
};
</script>
